<template>
    <div id="mainContent">
        <!-- 基础信息报废库 -->
        <el-card class="box-card" style="margin-right:15px;">
            <el-row class="searchBox">
                <el-form :model="form" :inline="true" size="small" label-width="100px">
                    <el-form-item label="器具名称：">
                        <el-input size="small" placeholder="器具名称"></el-input>
                    </el-form-item>
                    <el-form-item label="使用部门：">
                        <el-select v-model="form.departmentVal" placeholder="请选择" style="width: 200px;">
                            <el-option v-for="item in form.department"
                                :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="统一编号：">
                        <el-input size="small" placeholder="统一编号"></el-input>
                    </el-form-item>
                    <el-form-item label="分类编号：">
                        <el-input size="small" placeholder="分类编号"></el-input>
                    </el-form-item>
                    <el-form-item label="测量范围：">
                        <el-input size="small" placeholder="测量范围"></el-input>
                    </el-form-item>
                    <el-form-item label="检定周期：">
                        <el-select v-model="form.departmentVal" placeholder="请选择" style="width: 200px;">
                            <el-option v-for="item in form.department"
                                :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-col :span="2" :offset="22" style="text-align: right;">
                    <jt-table-column-filter :table-key.sync="tableKey" :header-data.sync="tableHeaderArr" :filter-column.sync="filterColumnData"></jt-table-column-filter>
                </el-col>
            </el-row>
            
            <el-table :data="tableData" :key='tableKey' v-loading="loading" border stripe height="420">
                <el-table-column type="index" label="序号" width="50" align="center" :resizable="false"></el-table-column>
                <el-table-column align="center" :key='item' v-for='item in filterColumnData' :resizable="false" 
                    :label="getTableHeaderLabel(item)" 
                    :prop="item" 
                    :min-width="getTableColumnWidth(item)" 
                    :fixed="getTableColumnFixed(item)" 
                    :sortable="getTableColumnSort(item)">
                    <template slot-scope="scope">
                        <div v-if="item !== 'historyRecord'">{{scope.row[item]}}</div>
                        <div v-else><el-button type="text" @click="lookCard">查看</el-button></div>
                        <el-tooltip v-if="item === 'operate'" class="item" effect="dark" content="详情" placement="top">
                            <el-button icon="el-icon-document" size="small" @click="showDetails"></el-button>
                        </el-tooltip>
                        <el-button v-if="item === 'operate'" type="danger" size="small" icon="el-icon-delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 查看详情 -->
            <look-details :show.sync="details"></look-details>
            <!-- 查看历史记录卡 -->
            <history-card-details :show.sync="cardDetails"></history-card-details>

            <el-row type="flex" justify="center">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizeArr"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"></el-pagination>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    import JtTableColumnFilter from 'components/jt-table-column-filter/index';    // 导入表格列筛选组件
    import LookDetails from 'dialog/standing-book-manage/basic-info-scrap/look-details';
    import HistoryCardDetails from 'dialog/standing-book-manage/basic-info-manage/history-card-detail';
    export default {
        name: 'BasicInfoScrap',
        components: {
            'jt-table-column-filter': JtTableColumnFilter,
            'look-details': LookDetails,
            'history-card-details': HistoryCardDetails
        },
        data(){
            return {
                form: {
                    department: [],
                    departmentVal: ''
                },
                tableData: [{
                        id: "222",
                        natasknameme: "等待审核",
                        status: "等待审核",
                        projectname: "测试",
                        projectcode: "111",
                        resource: "10",
                        operate: ""
                    },{
                        id: "222",
                        natasknameme: "等待审核",
                        status: "等待审核",
                        projectname: "测试",
                        projectcode: "111",
                        resource: "10",
                        operate: ""
                    },{
                        id: "222",
                        natasknameme: "等待审核",
                        status: "等待审核",
                        projectname: "测试",
                        projectcode: "111",
                        resource: "10",
                        operate: ""
                    },{
                        id: "222",
                        natasknameme: "等待审核",
                        status: "等待审核",
                        projectname: "测试",
                        projectcode: "111",
                        resource: "10",
                        operate: ""
                    },{
                        id: "222",
                        natasknameme: "等待审核",
                        status: "等待审核",
                        projectname: "测试",
                        projectcode: "111",
                        resource: "10",
                        operate: ""
                    },{
                        id: "222",
                        natasknameme: "等待审核",
                        status: "等待审核",
                        projectname: "测试",
                        projectcode: "111",
                        resource: "10",
                        operate: ""
                    },{
                        id: "222",
                        natasknameme: "等待审核",
                        status: "等待审核",
                        projectname: "测试",
                        projectcode: "111",
                        resource: "10",
                        operate: ""
                    },{
                        id: "222",
                        natasknameme: "等待审核",
                        status: "等待审核",
                        projectname: "测试",
                        projectcode: "111",
                        resource: "10",
                        operate: ""
                    },{
                        id: "222",
                        natasknameme: "等待审核",
                        status: "等待审核",
                        projectname: "测试",
                        projectcode: "111",
                        resource: "10",
                        operate: ""
                    },{
                        id: "222",
                        natasknameme: "等待审核",
                        status: "等待审核",
                        projectname: "测试",
                        projectcode: "111",
                        resource: "10",
                        operate: ""
                    }],
                details: false,       // 详情
                cardDetails: false,    // 查看历史记录卡
                loading: false,
                tableKey: 1,
                filterColumnData: [],
                tableHeaderArr: [{
                        'name': 'id',
                        'alias': '分类代码',
                        'default': true,
                        'width': 200,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'status',
                        'alias': '统一编号',
                        'default': true,
                        'width': 120,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'resource',
                        'alias': '分类编号',
                        'default': false,
                        'width': 120,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'projectname',
                        'alias': '器具名称',
                        'default': true,
                        'width': 150,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'projectcode',
                        'alias': '型号',
                        'default': true,
                        'width': 150,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'fanwei',
                        'alias': '范围',
                        'default': true,
                        'width': 150,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'correct',
                        'alias': '准确度',
                        'default': true,
                        'width': 100,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'production',
                        'alias': '生产厂家',
                        'default': true,
                        'width': 200,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'leaveNum',
                        'alias': '出厂编号',
                        'default': true,
                        'width': 200,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'leaveDate',
                        'alias': '出厂日期',
                        'default': true,
                        'width': 150,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'manageStatus',
                        'alias': '管理状态',
                        'default': true,
                        'width': 120,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'useDepartment',
                        'alias': '使用部门',
                        'default': true,
                        'width': 150,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'changeDate',
                        'alias': '变更日期',
                        'default': true,
                        'width': 120,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'checkDepartment',
                        'alias': '检定部门',
                        'default': true,
                        'width': 150,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'checkform',
                        'alias': '检定形式',
                        'default': true,
                        'width': 150,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'checkWeekDate',
                        'alias': '检定周期',
                        'default': true,
                        'width': 110,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'checkDate',
                        'alias': '检定日期',
                        'default': true,
                        'width': 120,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'validDate',
                        'alias': '报废日期',
                        'default': true,
                        'width': 120,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'checkResult',
                        'alias': '检定结果',
                        'default': true,
                        'width': 110,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'weekRecord',
                        'alias': '周期档案',
                        'default': true,
                        'width': 120,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'abcSort',
                        'alias': 'ABC分类',
                        'default': true,
                        'width': 120,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'remark',
                        'alias': '备注',
                        'default': true,
                        'width': 120,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'historyRecord',
                        'alias': '历史记录卡',
                        'default': true,
                        'width': 120,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'changeRecord',
                        'alias': '变更记录',
                        'default': true,
                        'width': 110,
                        'fixed': false,
                        'sort': true
                    },
                    {
                        'name': 'operate',
                        'alias': '操作',
                        'default': true,
                        'width': 160,
                        'fixed': 'right',
                        'sort': false
                    }],
                pageSizeArr: [10, 20, 50],
                pageSize: 10,
                pageTotal: 20,
                currentPage: 1,
                operateSort: 0  // 判断dialog打开类型：新增或修改或详情
            }
        },
        methods: {
            formatter(row, column){
                return row.id;
            },
            handleSizeChange(val){
                // console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val){
                // console.log(`当前页: ${val}`);
            },
            // 表头展示
            getTableHeaderLabel(str) {
                return this.getTableSomeValue(str, 'alias');
            },
            // 获取表格列的宽度
            getTableColumnWidth(str){
                return this.getTableSomeValue(str, 'width');
            },
            // 获取表格列是否是固定的
            getTableColumnFixed(str){
                return this.getTableSomeValue(str, 'fixed');
            },
            // 获取表格列是否排序
            getTableColumnSort(str){
                return this.getTableSomeValue(str, 'sort');
            },
            // 获取表格表头，列宽度，列固定，列排序的值
            getTableSomeValue(str, keyName){
                for (var value of this.tableHeaderArr) {
                    if (value['name'] == str) {
                        return value[keyName];
                    }
                }
            },
            // 详情
            showDetails(){
                this.details = true;
            },
            // 查看历史记录卡
            lookCard(){
                this.cardDetails = true;
            }
        }
    }
</script>